<template>

  <div id = "teamPage">
    <van-search v-model="searchText" placeholder="搜索队伍" clearable="true" @search="onSearch"/>
    <van-button  class="add-button" icon="plus" type="primary" @click="doJoinTeam"/>

    <team-card-list :team-list="teamList"/>

    <van-empty v-if="teamList.length < 1" description="数据为空"/>
  </div>

</template>

<script setup>


import {useRouter} from "vue-router";
import TeamCardList from "../components/TeamCardList.vue";
import {onMounted, ref} from "vue";
import myAxios from "../plugins/myAxios";
import {showFailToast} from "vant";

const router = useRouter();
const searchText  = ref('');

const doJoinTeam =() =>{
  router.push({
    path: "/team/add"
  })
}


const teamList  = ref([]);

onMounted(async() => {
  listTeam();
})

const onSearch = (val) =>{
  listTeam(val);
}

/**
 * 搜索队伍
 * @param val
 * @returns {Promise<void>}
 */
const listTeam = async (val = '') => {
  const res = await myAxios.get("/team/list/my/create", {
    params: {
      searchText: val,
      pageNum: 1,
    },
  });
  if (res?.code === 0) {
    teamList.value = res.data;
  } else {
    showFailToast('加载队伍失败，请刷新重试');
  }
}

</script>

<style scoped>
@import "../assets/css/team.css";
</style>